<!--
 * @Author: WeiJin 3413105907@qq.com
 * @Date: 2023-12-10 22:43:10
 * @LastEditors: WeiJin 3413105907@qq.com
 * @LastEditTime: 2023-12-17 20:54:15
 * @FilePath: \rpsm-user\src\views\home\blog\BlogMessage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div>

        <div class="serach">
            <el-input v-model="querymessageTitle" placeholder="请输入标题"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="queryMessageByTitle">搜索</el-button>
            <el-button  @click="addMessageDialog = true" type="primary"><i class="el-icon-plus"></i>发布</el-button>
        </div>
        


        <el-dialog title="发布帖子" :visible.sync="addMessageDialog">
        <el-form >
            <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="messageTitle" autocomplete="off" prop="title"></el-input>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth"  >
                <el-input
                type="textarea"
                resize="none"
                :rows="20"
                placeholder="请输入内容"
                v-model="messageContent"
                prop="content">
              </el-input>
            </el-form-item> 
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addMessageDialog = false">取 消</el-button>
            <el-button type="primary" @click="addMessage">确 定</el-button>
        </div>
        </el-dialog>
      
        <template>
            <div v-for="message in messageList" :key="message.message.message_id">
                <el-link href.top="" target="_self" :underline="false" 
                @click="updateBrowser(message.message.message_id)">
                    <h3>{{ message.message.message_title }}</h3>
                </el-link>
                <div class="describe flex-center">
                    <div class="mar-right-10">
                        <i class="el-icon-view"></i>
                        {{ message.message.message_browse }} 
                        <!-- 浏览 -->
                    </div>
                    <div class="mar-right-10">
                        <i class="iconfont icon-dianzan "></i>
                        {{ message.message.message_like }}
                         <!-- 赞 -->
                    </div>
                    <div class="mar-right-10">
                        <i class="iconfont icon-cai "></i> 
                        {{ message.message.message_unlike }} 
                        <!-- 踩 -->
                    </div>
                <!-- <div class="flex-center"> -->
                    <!-- 作者： -->
                    <img class="mar-right-10" :src="message.user.user_avatar" alt="头像">
                <!-- </div> -->
                    <el-link href.prevent="" target="_blank" :underline="false" class="el-link">
                        {{ message.user.username }}
                    </el-link>
                </div>
                <el-divider></el-divider>
            </div>
            
        </template>
        
       
      </div>
</template>


<style scoped>
    .el-form{
        margin-left: auto;
    }
    .describe,.el-link{
       font-size: 13px;     
    }
    .mar-right-10{
        margin-right: 10px;
    }
    .el-link{
        margin-bottom: 2px !important;
    }
    .serach{
        display: flex;
        margin:30px 0;
    }
    .message-content{
        height: 318px;
    }
    .flex-center{
        display: flex;
        align-items: center;
       
    }
    img{
        height: 30px; 
        width:30px;
        margin-right: 5px;
    }

</style>
    
<script>

import {baseurl} from '@/param'

export default {
    name:'BlogMessage',
    data () {
        return {
            messageList: [],
            addMessageDialog: false,
            messageTitle:"",
            querymessageTitle:"",
            messageContent:"",
            formLabelWidth: '120px',
            userInfo:{},
            // rules: {
            //     title: [
            //         { required: true, message: '请输入标题', trigger: 'blur' },
                    
            //     ],
            //     content: [
            //         { required: true, message: '请输入内容', trigger: 'blur' }
            //     ],
            // },
        }
    },
    methods:{
        updateBrowser(id){
            
             //跳转
             this.$router.push({
                path:'/blog/messageDetails',
                query:{messageId:id},
            })
            //浏览加一
            axios.put(`${baseurl}/forum/updateBrowse/${id}`,{},{
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 
            }).then(res=>{
                if(res.data.code){
                    this.getMessage()
                }
            }).catch(err=>console.log(err.message))
           
            
        },
        queryMessageByTitle(){
            this.getMessage()
        },
        addMessage(){
            if(!this.messageTitle){
                alert("请先输入标题")
                return
            }
            if(!this.messageContent){
                alert("请先输入内容")
                return
            }
            axios.post(`${baseurl}/forum/addMessage`,{
                // params:{
                    message_userid: this.userInfo.userid,
                    message_title:this.messageTitle,
                    message_content:this.messageContent,
                    // message_publish_time:new Date()
                // },
               
            }, {headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                }} ).then(res=>{
                if(res.data.code){
                    alert("发布成功")
                    this.getMessage()
                }else{
                    alert("发布失败")
                }
                this.addMessageDialog = false
            }).catch(err=>console.log(err.message))
           
        },
        getMessage(){
            axios.get (`${baseurl}/forum/queryMessage`,{
                params:{
                    title:this.querymessageTitle
                },
                headers:{
                    'Authorization':sessionStorage.getItem('Authorization')
                } 
        })
        .then(res=>{
            if(res.data.code){
                this.messageList = res.data.data
            }
        }).catch(err=>console.log(err))
        }
    },
   
    mounted () {
        this.userInfo=JSON.parse(sessionStorage.getItem("userInfo"))
        // alert(new Date())
        this.getMessage()
    }
}
</script>